<template>
  <a-layout>

    <a-layout-content
        :style="{background: '#fff', padding:'24px', margin: 0, minHeight:'280px'}">

      <a-form layout="inline">

        <a-form-item>
          <a-button type="primary" @click="add" >新增</a-button>
        </a-form-item>

      </a-form>

      <a-table :row-key="record => record.id" :dataSource="level" :columns="columns" :pagination="false" @change="handleTableChange">
        <template #bodyCell="{ column, record }">

          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="primary" @click="edit(record)">编辑</a-button>

              <a-popconfirm
                  title="是否确认删除?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="del(record.id)"
              >
                <a-button type="primary" danger >删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-layout-content>

    <a-modal
        v-model:visible="visible"
        title="Title"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
    >

      <!--      <p>表单</p>-->
      <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="名称">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="父级分类">
          <a-select
              ref="select"
              v-model:value="formState.parent"
          >
            <a-select-option :key="0" :value="0">无</a-select-option>
            <a-select-option v-for="c in level" :key="c.id" :value="c.id" :disabled="formState.id === c.id">{{ c.name }}</a-select-option>
          </a-select>

        </a-form-item>
        <a-form-item label="排序">
          <a-input v-model:value="formState.sort" />
        </a-form-item>

      </a-form>

    </a-modal>
  </a-layout>
</template>

<script>
import {message} from "ant-design-vue"
import axios from "axios"
import {onMounted, ref} from "vue"
import {arrayToTree} from "@/util/Tool"

export default {
  name: "AdminCategory",
  setup(){
    const formState = ref({})
    const category = ref()
    const columns = ref([
      {
        title: '名称',
        dataIndex: 'name',
      },
      {
        title: '父级分类',
        dataIndex: 'parent',
      },
      {
        title: '排序',
        dataIndex: 'sort',
      },
      {
        title: '操作',
        key: 'action',
      }
    ])
    onMounted(()=>{
      load()
    })
    const level = ref()
    const load = ()=>{
      axios.get("api/getAllCategory").then(res=>{
        if (res.data.code === "200"){
          category.value = res.data.date
          console.log(category)
          console.log("***********")
          level.value = arrayToTree(category.value, 0)
          console.log(level)
        } else {
          message.error(res.data.msg);
        }
      })
    }

    const handleTableChange = ()=>{
      load()
    }

    const visible = ref(false);
    const confirmLoading = ref(false);

    const edit = (record) => {
      formState.value = JSON.parse(JSON.stringify(record));
      visible.value = true;
    };

    const add = () => {
      formState.value = {};
      visible.value = true;
      load()

    };

    const del = (id) => {
      axios.delete("api/deleteCategory/" + id).then(res=>{
        if (res.data.code === "200"){
          message.success(res.data.msg);
          load()
        } else {
          message.error(res.data.msg);
        }
      })
    };

    const handleOk = () => {
      confirmLoading.value = true;
      axios.post("api/saveCategory",formState.value).then(res=>{
        confirmLoading.value = false;
        visible.value = false;
        if (res.data.code === "200"){
          load()
          message.success(res.data.msg);
        } else {
          message.error(res.data.msg);
        }
      })

    };

    return {
      category,
      columns,
      handleTableChange,

      visible,
      confirmLoading,
      add,
      edit,
      del,
      handleOk,
      labelCol: { style: { width: '150px' } },
      wrapperCol: { span: 14 },
      formState,
      load,
      level,
    }
  }
}
</script>

<style scoped>

</style>